import { useNavigate } from "umi";
import { PageContainer } from "@ant-design/pro-layout";
import { Button, Card, Pagination, PaginationProps, Space } from "antd";
import { Scrollbars } from 'react-custom-scrollbars';
import { useState } from "react";

const defaultArticles = [
  { id: 1, title: 'Article 1', content: 'Content of article 1...' },
  { id: 2, title: 'Article 2', content: 'Content of article 2...' },
  { id: 3, title: 'Article 3', content: 'Content of article 3...' },
  { id: 4, title: 'Article 1', content: 'Content of article 1...' },
  { id: 6, title: 'Article 2', content: 'Content of article 2...' },
  { id: 7, title: 'Article 3', content: 'Content of article 3...' },
];

const PostCategoryPage = () => {
  const [articles, setArticles] = useState<any[]>(defaultArticles)

  const navigate = useNavigate()

  const itemRender: PaginationProps['itemRender'] = (_, type, originalElement) => {
    if (type === 'prev') {
      return <a>上一页</a>;
    }
    if (type === 'next') {
      return <a>下一页</a>;
    }
    return originalElement;
  };
  return <>
    <Card style={{marginBottom: '20px'}} bodyStyle={{paddingTop: '10px', paddingBottom: '10px'}}>
      <Space>
        {/* <Button>最新</Button> */}
      </Space>
    </Card>

    <Card
     style={{marginBottom: '20px', background: 'none', border: 0}}
     bodyStyle={{height: '60vh', padding: 0, border: 0, overflowY: 'auto'}}>
      <Scrollbars
        style={{ height: '100%' }}
        renderThumbVertical={({ ...props }) => (
          <div
            {...props}
            style={{
              backgroundColor: '#1890ff', // 滚动条颜色
              borderRadius: '4px', // 滚动条圆角
            }}
          />
        )}
      >
        {articles?.map(article => <Card
          key={article.id}
          title={article.title}
          style={{ marginBottom: '16px'}}
          hoverable
          onClick={() => {
            navigate(`/post/details?id=${article.id}`)
          }}
        >
          <p>{article.content}</p>
        </Card>)}
      </Scrollbars>
      

    </Card>
    <div style={{textAlign: 'right', marginBottom: 0}}>
      <Pagination
        total={articles?.length}
        itemRender={itemRender}
        showSizeChanger
        showQuickJumper
        showTotal={(total) => `共 ${total} 条`}
      />
    </div>
    
  </>
}

export default PostCategoryPage;